<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%
  String path = request.getContextPath();
  String basePath =
          request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
                  + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
  <base href="<%=basePath%>">
  <meta charset="UTF-8" name="viewport" content="initial-scale=1.0, user-scalable=no">
  <title>失物招领系统</title>
  <link rel="shortcut icon" href="static/image/logo01.ico"/>
  <link href="static/easyui/themes/default/easyui.css" rel="stylesheet"/>
  <link href="static/easyui/themes/icon.css" rel="stylesheet"/>
  <script type="text/javascript" src="static/easyui/jquery.min.js"></script>
  <script type="text/javascript" src="static/easyui/jquery.easyui.min.js"></script>
  <script type="text/javascript" src="static/easyui-lang-zh_CN.js"></script>
  <script type="text/javascript" src="static/vue/vue.js"></script>
  <!-- ElementUI 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- ElementUI 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<%-- 以图片的方式展示失物信息 --%>
<div id="app">
  <el-timeline style="width: 50%">
    <el-timeline-item v-for="(item, index) in noticeList" :key="index" :timestamp="item.created" placement="top">
      <el-card>
        <h1>{{item.title}}</h1>
        <p>{{item.content}}</p>
        <el-image
                style="width: 200px; height: 200px"
                :src="'image?fileName=' + item.image"
                fit="true"></el-image>
      </el-card>

    </el-timeline-item>
  </el-timeline>
</div>
<script>
  $(function () {

  })
  var app = new Vue({	//创建vue对象
    el: '#app',		//指定一个标签作为vue的挂载点（作用范围），使用css选择器选择
    data: {			//vue中使用的数据
      noticeList: []
    },
    mounted() {
      var _this = this;
      $.ajax({
        url: "notice/all",
        type: "get",
        success: function (response) {
          console.log(response);
          _this.noticeList = response.data;
        }
      })
    }
  });
</script>
</body>
</html>
